<template>
    <div class="home">
      <!--第一行-->
      <el-row :gutter="14" style="height: 240px; font-size: 10px; margin-bottom: 20px">
        <!--第一行，第一列-->
        <el-col :span="6">
          <el-card shadow="always" style="height: 240px">
            <div id="caseDemo" style="height: 200px"></div>
          </el-card>
        </el-col>
        <!--第一行，第二列-->
        <el-col :span="6">
          <el-card shadow="always" style="height: 240px">
            <div id="reportDemo" style="height: 200px"></div>
          </el-card>
        </el-col>
        <!--第一行，第三列-->
        <el-col :span="12">
          <el-row :gutter="14" style="height: 120px; margin-bottom: 5px">
            <el-col :span="8">
              <el-card shadow="always">
                项目数
                <br>
                <span class="number">{{ global_summary.project_count }}</span>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always">
                接口数
                <br>
                <span class="number">{{ global_summary.interface_count }}</span>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always">
                用例数
                <br>
                <span class="number">{{ global_summary.testcase_count }}</span>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="14" style="height: 120px">
            <el-col :span="8">
              <el-card shadow="always">
                环境数
                <br>
                <span class="number">{{ global_summary.environment_count }}</span>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always">
                套件数
                <br>
                <span class="number">{{ global_summary.testsuite_count }}</span>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always">
                报告数
                <br>
                <span class="number">{{ global_summary.report_count }}</span>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row :gutter="14" style="height: 320px; font-size: 10px; margin-bottom: 14px">
        <el-col :span="24">
          <el-card shadow="always" style="height: 320px">
            <div id="reportLineDemo" style="height: 280px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import { getSummary } from '../api/api'

export default {
  mounted () {
    this.getSummaryData()
  },
  data () {
    return {
      global_summary: {},
      testcase_summary: [],
      report_summary: {}
    }
  },
  methods: {
    getSummaryData () {
      getSummary()
        .then(response => {
          if (response.data.code !== 0) return
          this.global_summary = response.data.data.global_statistics
          this.testcase_summary = response.data.data.testcase_statistics
          this.report_summary = response.data.data.report_statistics
          this.loadCase()
          this.loadReport()
          this.loadReportLine()
        })
    },
    loadCase () {
      var caseChart = echarts.init(document.getElementById('caseDemo'))
      var option = {
        title: {
          text: '用例执行结果统计',
          left: 'center',
          textStyle: { fontStyle: 'normal', fontWeight: 'bold', fontFamily: 'sans-serif', fontSize: 12 }
        },
        color: ['#59c4e6'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['success', 'fail', 'error', 'skip'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '30%',
            data: [
              this.testcase_summary[0].total,
              this.testcase_summary[1].total,
              this.testcase_summary[2].total,
              this.testcase_summary[3].total
            ]
          }
        ]
      }
      caseChart.setOption(option)
    },
    loadReport () {
      var reportChart = echarts.init(document.getElementById('reportDemo'))
      var option = {
        title: {
          text: '报告结果统计',
          left: 'center',
          textStyle: { fontStyle: 'normal', fontWeight: 'bold', fontFamily: 'sans-serif', fontSize: 12 }
        },
        color: ['#d95850', '#4ea397'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '统计',
            type: 'pie',
            radius: '65%',
            center: ['50%', '60%'],
            data: [
              { value: this.report_summary.fail, name: '失败' },
              { value: this.report_summary.success, name: '成功' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      reportChart.setOption(option)
    },
    loadReportLine () {
      var reportLineChart = echarts.init(document.getElementById('reportLineDemo'), 'light')
      var option = {
        title: {
          text: '报告生成概览曲线图',
          left: 'center',
          textStyle: { fontStyle: 'normal', fontWeight: 'bold', fontFamily: 'sans-serif', fontSize: 12 }
        },
        color: ['#F56C6C'],
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var tiptext = ''
            params.forEach(function (item, index) {
              tiptext += item.data.name +
                '</br>' + '成功: ' + item.data.success +
                '</br>' + '失败: ' + item.data.fail +
                '</br>' + '错误: ' + item.data.error +
                '</br>' + '跳过: ' + item.data.skip +
                '</br>' + '时间: ' + item.data.time
            })
            return tiptext
          }
        },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '2%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.report_summary.time
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            name: '报告记录',
            type: 'line',
            smooth: true,
            data: this.report_summary.detail
          }
        ]
      }
      reportLineChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
  .el-card {
    height: 115px;
    border: darkgrey solid 1px;
  }
  .number {
    display: block;
    font-size: 30px;
    text-align: center;
    color: darkorange;
  }
</style>
